<template>
  <baseCard :title="'需求跟踪'"
            height="9.6rem"
            contentPadding="0.2rem"
            style="margin-right: 0; margin-left: 0; margin-bottom: 0rem">
    <div class="trace-content">
      <div class="trace-content-left">
        <vptBaseTemplate1008 :listData="baseData.requirement"
                             :traceData="traceData.traceInfo"></vptBaseTemplate1008>
        <vptBaseTemplate1008 :listData="baseData.staff"
                             :baseStyle="staffStyle"
                             :traceData="traceData.traceInfo"></vptBaseTemplate1008>
        <vptBaseTemplate1008 :listData="baseData.iterations"
                             :baseStyle="staffStyle"
                             :traceData="traceData.traceInfo"></vptBaseTemplate1008>
        <vptTabs v-bind="$attrs"
                 :active="active"
                 @change="change"
                 :tabsStyle="tabsStyle"></vptTabs>
      </div>
      <div class="trace-content-right">
        <div class="vpt-base-table">
          <div class="vpt-base-table-title">需求研发进展日志</div>
          <vptBaseTable1001 :loading="loading"
                            :columns="columns"
                            :dataList="traceData.traceList"
                            :pageTotal="traceData.traceList.length"
                            :showPagination="false"></vptBaseTable1001>
        </div>
      </div>
    </div>
  </baseCard>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import baseCard from "@/components/vpt-cards-1002/index.vue";
import vptBaseTemplate1008 from "@/components/vpt-base-template-1008/index.vue";
import vptTabs from "@/components/vpt-tabs/index.vue";
import vptBaseTable1001 from "@/components/vpt-base-table-1001/index.vue";

const props = defineProps({
  traceData: { type: Object, default: () => { } },
  height: { type: String, default: "7.15rem" },
});

const staffStyle = {
  marginTop: "0.16rem",
};

const tabsStyle = {
  width: "5.4rem",
  height: "2.9rem",
  marginTop: "0.16rem",
};

const baseData = computed(() => {
  return {
    requirement: {
      total: {
        label: "需求总数",
        value: "total_num",
      },
      list: [
        {
          label: "研发中",
          value: "yfz",
        },
        {
          label: "测试中",
          value: "csz",
        },
        {
          label: "已发版",
          value: "yfb",
        },
        {
          label: "未开始",
          value: "wks",
        },
      ],
      data: [
        {
          label: "其中迭代进行中迭代需求",
          value: "dd_total_num",
        },
        {
          label: "研发中",
          value: "dd_yfz",
        },
        {
          label: "测试中",
          value: "dd_csz",
        },
        {
          label: "已发版",
          value: "dd_yfb",
        },
        {
          label: "未开始",
          value: "dd_wks",
        },
      ],
      rate: [
        {
          label: "转研发进度",
          value: "zyfjd",
          unit: "%",
        },
        {
          label: "转测试进度",
          value: "zcsjd",
          unit: "%",
        },
        {
          label: "测试完成进度",
          value: "cswcjd",
          unit: "%",
        },
      ],
    },
    iterations: {
      total: {
        label: "迭代总数",
        value: "ddzs",
      },
      list: [
        {
          label: "进行中",
          value: "ddjxz",
        },
        {
          label: "已完成",
          value: "ddywc",
        },
        {
          label: "未开始",
          value: "ddwks",
        },
        {
          label: "已延期",
          value: "ddyyq",
        },
      ],
      data: [
        {
          label: "代码总行数",
          value: "dmzhs",
        },
        {
          label: "本日新增",
          value: "dm_add_day",
        },
        {
          label: "本月新增",
          value: "dm_add_mon",
        },
        {
          label: "本年新增",
          value: "dm_add_year",
        },
      ],
    },
    staff: {
      total: {
        label: "人员情况",
        value: "person_num",
        unit: "人",
      },
      list: [
        {
          label: "需求",
          value: "xq_num",
          unit: "人",
        },
        {
          label: "设计",
          value: "sj_num",
          unit: "人",
        },
        {
          label: "研发",
          value: "yf_num",
          unit: "人",
        },
        {
          label: "测试",
          value: "cs_num",
          unit: "人",
        },
        {
          label: "实施/运维",
          value: "yw_num",
          unit: "人",
        },
        {
          label: "其他",
          value: "qt_num",
          unit: "人",
        },
      ],
      data: [
        {
          label: "今日活跃人数",
          value: "yy_num",
          unit: "人",
        },
      ],
    },
  };
});

let loading = ref(false);

let columns = reactive([
  {
    title: "时间",
    dataIndex: "date_time",
    align: "left",
  },
  //  {
  //   title: "应用名称",
  //   dataIndex: "module",
  //   align: "left",
  //   width: "130",
  // },
  // {
  //   title: "用户名称",
  //   dataIndex: "person",
  //   align: "left",
  //   width: "130",
  // },
  {
    title: "内容",
    dataIndex: "content",
    align: "left",
  },
]);

let dataList = ref([
  {
    moduleName: "预算批复与调整",
    content: "预算批复与调整",
    createTime: "10/01 13:44:46",
  },
  {
    moduleName: "预算批复与调整",
    content: "预算批复与调整",
    createTime: "10/01 13:44:46",
  },
  {
    moduleName: "预算批复与调整",
    content: "预算批复与调整",
    createTime: "10/01 13:44:46",
  },
  {
    moduleName: "预算批复与调整",
    content: "预算批复与调整",
    createTime: "10/01 13:44:46",
  },
  {
    moduleName: "预算批复与调整",
    content: "预算批复与调整",
    createTime: "10/01 13:44:46",
  },
  {
    moduleName: "预算批复与调整",
    content: "预算批复与调整",
    createTime: "10/01 13:44:46",
  },
]);

// let pageIndex = ref(1);

const emit = defineEmits(["changePage"]);

const changePage = (value) => {
  emit("changePage", value);
};
// let pageTotal = ref(dataList.length);

const active = ref("1");

const tabs = reactive([
  {
    label: "需求停留平均天数",
    value: "1",
  },
  {
    label: "处室需求申请量排行TOP5",
    value: "2",
  },
]);

const change = (value) => {
  active.value = value;
};

defineOptions({
  name: "vptModuleTrace",
});
</script>

<style lang="less" scoped>
.trace-content {
  display: flex;
  // flex: 1;
  justify-content: space-between;
  // .trace-content-right {
  //   flex: 1;
  // }
  .vpt-base-table {
    .vpt-base-table-title {
      font-size: 0.18rem;
      color: #fff;
      margin-bottom: 0.1rem;
    }
    width: 10.5rem;
    height: 8.43rem;
    margin-left: 0.16rem;
    padding: 0.16rem;
    background: #1470cc1a;
    border: 0.01rem solid #e6ebf5;
    /deep/ .arco-table-td {
      background: #0d2542 !important;
      border-bottom: 1px solid #2d435c;
    }
  }
}
</style>